/**
 * karin 2017/10/27
 * 完结订单的服务评价弹窗
 */
import React, { Component } from 'react'
import Style from './index.scss'

import { Toast } from 'antd-mobile'


export default class ServiceEvaluationDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            starNum: this.props.default.points || 0, //详情数据
            details: '', // 评价详情
        };
    }


    /**
     * 事件
     */
    // 点击了星星
    click(type, num) {
        type = type > 0 ? 1 : 0; // 是否已经评价 :1表示已经评价
        if (!type) {
            this.setState({
                starNum: num + 1,
            });
        }
    }
    // 获取评价内容
    getDetails(e) {
        this.setState({ details: e.target.value?e.target.value:''});
    }

    //返回的数据
    /*   getData() {
           if (this.state.details) {
                this.props.onClick(this.state.starNum,this.state.details) //传递给父组件
           }else {
                Toast.info('请输入您的评语', 1);
           }
   
       }
       */

    /**
     * 组件
     */
    render() {
        //  let {handleRemark}=this.props;
        let type = this.props.default.points ? 1 : 0; // 是否已经评价 :1表示已经评价
        let details = this.props.details, defaultS = this.props.default, getData = this.props.getData;


        return (
            <div className={defaultS.comments == '""' ? Style.body :Style.body +" " +Style.MT}>
                <div className={Style.title}>{details.title[type]}</div>
                <div className={Style.star}>
                    <div className={Style.starWords} > 服务{details.scoreShows[this.state.starNum]}</div>
                    <div className={Style.starShapeS} >
                        {
                            [1, 1, 1, 1, 1].map((e, i) => {
                                return <div key={i}
                                    onClick={() => this.click(defaultS.points, i)}
                                    className={i >= this.state.starNum ? '' : Style.starShapeCheck}
                                />
                            })
                        }
                    </div>
                </div>
                {type &&( defaultS.comments == '')? '' :
                    <textarea
                        placeholder={type ? '' : '说点什么吧 (比如:办理过程中满意的地方或者遇到的问题)'}
                        disabled={type ? "disabled" : ''}
                        className={Style.textarea}
                        rows="3"
                        maxLength="120"
                        onBlur={(e) => {
                            this.getDetails(e)
                        }}
                    >
                        {defaultS.comments}
                    </textarea>
                }
                {!type && <div className={Style.btn} onClick={() => getData(this.state.starNum, this.state.details)}>确定</div>}
            </div>
        );
    }
}

ServiceEvaluationDetails.defaultProps = {
    details: { title: ['服务评价', '我的评价'], scoreShows: ['打分：', ' (非常差)', ' (差)', ' (一般)', ' (好)', ' (非常好)'] }, //  5
    getData: () => console.log(""),
}
